import React, { useRef } from 'react';
import { Button, DatePicker, Form, Input, Modal } from 'antd';

export default function Dialog(props) {
    const formRef = useRef(null);

    const handleCancel = () => {
        props.setOpen(false);
        formRef.current?.resetFields();
    };
    const onFinish = async (values) => {
        props.operate(values)
        formRef.current?.resetFields();
        props.setOpen(false);
    };
    const onFinishFailed = (errorInfo) => { };

    return (
        <Modal
            title={props.title}
            open={props.open}
            // onOk={handleOk}
            onCancel={handleCancel}
            footer={null}
            style={
                {
                    textAlign: 'center'
                }
            }
        >
            <Form
                ref={formRef}
                name="basic"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                {
                    props.info.map(item => {
                        if (item.type === 'date') {
                            return (
                                <Form.Item
                                    label={item.msg}
                                    name={item.type}
                                    rules={item.rules}
                                    key={item.type}
                                >
                                    <DatePicker />
                                </Form.Item>
                            )
                        }
                        return (
                            <Form.Item
                                label={item.msg}
                                name={item.type}
                                rules={item.rules}
                                key={item.type}
                            >
                                <Input />
                            </Form.Item>
                        )
                    })
                }
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button key="submit" htmlType="submit" type="primary" >
                        确认
                    </Button>,
                    <Button key="back" onClick={handleCancel}>
                        取消
                    </Button>
                </Form.Item>
            </Form>

        </Modal>
    );
}
